<template>
  <div class="feedback-container">
    <div class="feedback-header">
      <el-page-header @back="goBack" :content="courseName" />
      <p class="sub-title">您的反馈对我们很重要</p>
    </div>

    <el-form 
      ref="feedbackForm" 
      :model="feedback" 
      :rules="rules" 
      label-position="top" 
      class="feedback-form"
    >
      <el-form-item label="课程内容评分" prop="courseRating">
        <el-rate 
          v-model="feedback.courseRating" 
          show-text 
          :texts="ratingTexts"
        />
      </el-form-item>

      <el-form-item label="课程内容评价" prop="courseContent">
        <el-input
          type="textarea"
          v-model="feedback.courseContent"
          :rows="4"
          placeholder="请详细描述您对课程内容的看法..."
        />
      </el-form-item>

      <el-form-item label="讲师评分" prop="teacherRating">
        <el-rate 
          v-model="feedback.teacherRating" 
          show-text 
          :texts="ratingTexts"
        />
      </el-form-item>

      <el-form-item label="讲师授课质量" prop="teacherQuality">
        <el-select v-model="feedback.teacherQuality" placeholder="请选择评价" class="full-width">
          <el-option label="非常满意" value="excellent" />
          <el-option label="满意" value="good" />
          <el-option label="一般" value="average" />
          <el-option label="需要改进" value="needImprovement" />
        </el-select>
      </el-form-item>

      <el-form-item label="课堂互动评分" prop="interactionRating">
        <el-rate 
          v-model="feedback.interactionRating" 
          show-text 
          :texts="ratingTexts"
        />
      </el-form-item>

      <el-form-item label="互动情况描述" prop="interactionDetail">
        <el-input
          type="textarea"
          v-model="feedback.interactionDetail"
          :rows="4"
          placeholder="请描述课堂互动的情况..."
        />
      </el-form-item>

      <el-form-item label="建议与改进意见">
        <el-input
          type="textarea"
          v-model="feedback.suggestions"
          :rows="4"
          placeholder="请提供您的建议或意见，帮助我们做得更好..."
        />
      </el-form-item>

      <el-form-item>
        <el-button 
          type="primary" 
          :loading="submitting"
          @click="submitForm"
          class="submit-button"
        >
          {{ submitting ? '提交中...' : '提交反馈' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'FeedBack',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      courseName: '',
      feedback: {
        courseId: null,
        courseName: '',
        courseRating: 0,
        courseContent: '',
        teacherRating: 0,
        teacherQuality: '',
        interactionRating: 0,
        interactionDetail: '',
        suggestions: ''
      },
      rules: {
        courseRating: [
          { required: true, message: '请对课程内容进行评分', trigger: 'change' }
        ],
        courseContent: [
          { required: true, message: '请填写课程内容评价', trigger: 'blur' },
          { min: 10, message: '评价内容至少10个字符', trigger: 'blur' }
        ],
        teacherRating: [
          { required: true, message: '请对讲师进行评分', trigger: 'change' }
        ],
        teacherQuality: [
          { required: true, message: '请选择讲师授课质量评价', trigger: 'change' }
        ],
        interactionRating: [
          { required: true, message: '请对课堂互动进行评分', trigger: 'change' }
        ],
        interactionDetail: [
          { required: true, message: '请描述课堂互动情况', trigger: 'blur' },
          { min: 10, message: '描述内容至少10个字符', trigger: 'blur' }
        ]
      },
      ratingTexts: ['很差', '较差', '一般', '良好', '优秀'],
      submitting: false
    }
  },
  created() {
    this.courseName = this.$route.query.courseName || ''
    this.feedback.courseId = this.courseId
    this.feedback.courseName = this.courseName
  },
  methods: {
    goBack() {
      this.$router.push('/home/employee/course')
    },
    async submitForm() {
      if (this.submitting) return
      
      try {
        await this.$refs.feedbackForm.validate()
        
        this.submitting = true
        // 这里添加API调用
        await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟API调用
        
        this.$message.success('反馈提交成功！')
        this.goBack()
      } catch (error) {
        if (error) {
          this.$message.error('表单验证失败，请检查填写的内容')
        } else {
          this.$message.error('提交失败，请稍后重试')
        }
      } finally {
        this.submitting = false
      }
    },
    resetForm() {
      this.$refs.feedbackForm.resetFields()
    }
  }
}
</script>

<style scoped>
.feedback-container {
  max-width: 800px;
  width: 90%;
  margin: 20px auto;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.feedback-header {
  margin-bottom: 30px;
}

.feedback-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.sub-title {
  margin: 10px 0 0;
  color: #909399;
  font-size: 14px;
}

.feedback-form {
  margin-top: 20px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-textarea__inner) {
  font-family: inherit;
}

:deep(.el-rate) {
  margin-top: 8px;
}

.full-width {
  width: 100%;
}

.submit-button {
  width: 200px;
  margin: 0 auto;
  padding: 10px 0;
  font-size: 16px;
}

.feedback-form :deep(.el-form-item:last-child) {
  margin-top: auto;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .feedback-container {
    margin: 10px;
    padding: 20px;
    min-height: calc(100vh - 20px);
  }
}
</style>